<template>
  <!-- 添加或修改菜单对话框 -->
  <!-- custom-class
       form 弹窗 默认必加--------------------------------------------------------
       dialogForm            =>  默认控制样式区域 管理部分公用样式
       form 弹窗 按布局格式添加 --------------------------------------------------
       dialogFormItemUDForm  =>  控制 form-item (label 、content) 上下布局样式 控制
       dialogFormItemLRForm  =>  控制 form-item (label 、content) 左右布局样式 控制
  -->
  <el-dialog v-loading="dialogFormLoading" :title="dialogFormTitle" custom-class="dialogForm dialogFormItemLRForm" :visible.sync="dialogFormVisibleBool" width="600px" :show-close="false">
    <el-form ref="dialogForm" :model="dialogForm" :rules="dialogRules" :class="dialogFormType==='view'?'formTable':''" :label-width="dialogFormType==='view'?(4* 1.4 + 1.2 + 1.2 + 'rem' ):'10rem'">
      <el-row class="formRow" :gutter="dialogFormType==='view'?0:24">
        <el-col :span="24">
          <el-form-item label="上级栏目" prop="parentId">
            <Treeselect v-model.trim="dialogForm.parentId"
                        :options="parentOptions"
                        :normalizer="normalizer"
                        :show-count="true"
                        placeholder="请选择"
            />
          </el-form-item>
        </el-col>
<!--        <el-col :span="24">-->
<!--          <el-form-item label="所属菜单" prop="menuId">-->
<!--            <el-select v-model.trim="dialogForm.menuId" filterable placeholder="请选择">-->
<!--              <el-option-->
<!--                  v-for="item in menuOptions"-->
<!--                  :key="item.menuId"-->
<!--                  :label="item.menuName"-->
<!--                  :value="item.menuId"-->
<!--                  :disabled="item.flag == false"-->
<!--              ></el-option>-->
<!--            </el-select>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
        <el-col :span="24">
          <el-form-item label="栏目名称" prop="name">
            <el-input v-model="dialogForm.name" show-word-limit maxlength="25"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="排序" prop="sort">
            <el-input v-model="dialogForm.sort" show-word-limit maxlength="8"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="dialogSubmitForm">确 定</el-button>
      <el-button @click="dialogResetFormMixins">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
// 混入
import { dialogFormMixins } from '@/mixins/publicMixins/dialogFormMixins'
// 组件
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
// ------------------------------------------------------------------------
export default {
  name: 'DictDialog',
  mixins: [dialogFormMixins],
  components: { Treeselect },
  data() {
    return {
      // 上级栏目
      parentOptions: [],
      // 所属菜单
      menuOptions: [],
      // 表单参数
      dialogForm: {
        parentId: '0',
        // menuId: null,
        name: null,
        sort: null,
        id: null
      },
      dialogRules: {
        parentId: [
          { required: true, message: '请选择栏目名称', trigger: 'change' }
        ],
        // menuId: [
        //   { required: false, message: '请选择所属菜单', trigger: 'change' }
        // ],
        name: [
          { required: true, message: '请输入栏目名称', trigger: 'blur' }
        ],
        sort: [
          { required: true, message: '请输入排序', trigger: 'blur' }
        ]
      }
    }
  },
  created() {},
  mounted() {
    // 上级栏目
    const menu = { id: 0, name: '栏目', children: [] }
    this.getTreeSelectMixins('parentOptions', '/ent-news-type/getAll', {}, 'id', menu)
    // 系统是否 Y/N
    this.getDictMixins('sysYNOptions', 'sys_yes_no')
  },
  methods: {
    /** 转换菜单数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.id,
        label: node.name,
        children: node.children
      }
    },

    /**
     * @description: 重新打开弹窗是赋初始值
     * @Author: baoxuhui
     * @return {*}
     */
    dialogResetForm() {
      this.dialogForm = {
        parentId: '0',
        // menuId: null,
        name: null,
        sort: null,
        id: null
      }
      this.resetForm('dialogForm')
    },
    /**
    * @description: 保存
    * @Author: baoxuhui
    * @return {*}
    */
    dialogSubmitForm() {
      this.$refs['dialogForm'].validate((valid) => {
        if (valid) {
          let url = null; let type = null
          console.log(this.dialogForm)
          if (this.dialogFormTitle == '编辑栏目' && this.dialogFormExtra.columnId) {
            this.dialogForm.id = this.dialogFormExtra.columnId
            url = '/ent-news-type/update'
            type = '修改'
          } else {
            url = '/ent-news-type/save'
            type = '新增'
          }
          this.dialogSaveOrUpdateMixins(url, this.dialogForm, type)
        }
      })
    },

    /**
     * @description: 调取详情
     * @Author: baoxuhui
     * @return {*}
     */
    dialogDetailApi(row) {
      if (this.dialogFormTitle === '新增栏目') {
        if (this.dialogFormExtra.columnId) {
          this.dialogForm.parentId = this.dialogFormExtra.columnId
        }
      }
      if (this.dialogFormTitle === '编辑栏目' && this.dialogFormExtra.columnId) {
        this.dialogGetDetailMixins('/ent-news-type/get', { id: row.id })
      }
    },
    /**
     * @description: 详情回显
     * @Author: baoxuhui
     * @param {*} res
     * @return {*}
     */
    dialogFormDetail(res) {
      const data = res.data
      this.dialogForm = data
      this.dialogFormLoading = false
    }
  }
}
</script>
